import React, {
  memo,
  // useEffect,
  useRef,
} from 'react'

export default memo(function App() {
  const titleRef = useRef()
  const inputRef = useRef()

  // 1.在useEffect中使用 document.querySelector查看titleDOM
  /* useEffect(() => {
    document.querySelector('.title')
  }, []) */

  // 2. 使用useRef查看titleDOM
  function showTitleDOM() {
    console.log(titleRef.current)
    inputRef.current.focus()
  }

  return (
    <div>
      <h2 className="title" ref={titleRef}>
        Hello World
      </h2>
      <input type="text" ref={inputRef} />
      <button onClick={showTitleDOM}>查看title的dom</button>
    </div>
  )
})
